<script setup>
import { onMounted } from "vue";
import { exercises } from "../../js/exercises"; // 根据实际路径调整
import { Delete, Edit } from "@element-plus/icons-vue";

// 在组件加载时自动调用
onMounted(() => {
  exercises.getAllExercisee(); // 直接调用方法，不需要解构
});
</script>

<template>
  <el-card>
    <div class="demo-pagination-block">
      <div class="card-header">
        <span>器材管理</span>
        <el-button plain @click="exercises.dialogFormVisible.value = true">
          添加器材
        </el-button>
        <el-dialog
          v-model="exercises.dialogFormVisible.value"
          title="添加器材"
          width="500"
          ><hr />
          <el-form :model="exercises.form" label-width="100px">
            <el-form-item label="器材名称">
              <el-input v-model="exercises.form.exerciseName"></el-input>
            </el-form-item>
            <el-form-item label="器材描述">
              <el-input v-model="exercises.form.description"></el-input>
            </el-form-item>
            <el-form-item label="器材类型">
              <el-input v-model="exercises.form.category"></el-input>
            </el-form-item>
          </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取消</el-button>
              <el-button type="primary" @click="exercises.Submitform">
                提交
              </el-button>
            </div>
          </template>
        </el-dialog>
      </div>
      <hr />
      <!-- 搜索查询 -->
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item
          label="器材名字"
          style="width: 300px"
          :model="exercises.formInline"
        >
          <el-input
            style="width: 240px"
            placeholder="请输入器材名"
            v-model="exercises.formInline.name"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="exercises.exerciseSearch"
            >搜索</el-button
          >
        </el-form-item>

        <el-form-item>
          <el-button type="default" @click="exercises.restest()"
            >重置</el-button
          >
        </el-form-item>
      </el-form>

      <!-- 页面表单 -->
      <el-table style="width: 100%" :data="exercises.exercisesList.value">
        <el-table-column prop="ExerciseID" label="器材编号" />
        <el-table-column prop="ExerciseName" label="器材名字" />
        <el-table-column prop="Description" label="器材描述">
          <template v-slot="scope">
            <el-tooltip
              class="item"
              effect="dark"
              :content="scope.row.Description"
              placement="top"
            >
              <div class="table-description">
                {{
                  scope.row.Description.length > 20
                    ? scope.row.Description.substring(0, 20) + "..."
                    : scope.row.Description
                }}
              </div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="Category" label="器材类别" />
        <el-table-column prop="statusText" label="器材状态" />

        <el-table-column label="操作" width="180">
          <template v-slot="scope">
            <!-- 编辑 -->
            <el-button
              @click="
                exercises.handleEdit(scope.row.ExerciseID, scope.row.status)
              "
              :type="scope.row.status === 1 ? 'success' : 'danger'"
              circle
            >
              {{ scope.row.status === 1 ? "停用" : "启用" }}
            </el-button>

            <el-button
              type="danger"
              :icon="Delete"
              circle
              @click="exercises.handleDelete(scope.row.ExerciseID)"
            />
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        class="el-p"
        v-model:current-page="exercises.currentPage.value"
        v-model:page-size="exercises.pageSize.value"
        :page-sizes="[5, 10, 15, 20]"
        :size="exercises.size.value"
        :disabled="exercises.disabled.value"
        :background="exercises.background.value"
        layout="jumper,total, sizes, prev, pager, next"
        :total="exercises.total.value"
        @size-change="exercises.handleSizeChange"
        @current-change="exercises.handleCurrentChange"
      />
    </div>
  </el-card>
</template>


<style scoped>
@import "../../css/exercises.css";
</style>
